<template>
  <div class="detailsAddress">
    <div class="title">
      <div class="tip"></div>
      <span>完成任务可得如下奖品</span>
    </div>
    <div class="img">
      <img :src="dataForm.prizes_img_url" alt="">
    </div>
    <div class="address" @click="goAddress">
      <div class="div1">
        <img class="icAddress" src="@/assets/images/ic_address.png" alt="">
        <div class="div1_1">
          <div class="top">
            <div class="message" v-if="dataForm.address.length === 0">请选择收货地址</div>
            <div class="userName">{{dataForm.address.name}}</div>
            <div class="phone">{{dataForm.address.mobile}}</div>
          </div>
          <div class="userAddress">{{dataForm.address.region_name}} {{dataForm.address.address_detail}}</div>
        </div>
      </div>
      <img class="icRight" src="@/assets/images/ic_right.png" alt="">

    </div>
    <div class="note">
      <textarea v-model="form.remark" name="" id="" cols="30" rows="10" placeholder="选填，请输入需要填写的备注"></textarea>
    </div>
    <div class="btn">
      <input type="button" :value="dataForm.ex_msg"
             :class="0 == dataForm.ex_status? 'active':'inputBg'"
             @click="onsubmit(dataForm.ex_status)">
    </div>
  </div>
</template>

<script>
  /**
   * 选择地址
   * @Author zzl
   * @Date 2019/6/12 16:05.
   */
  import {Dialog} from 'vant';
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {
      this.loadData();
    },
    components: {},
    props: {},
    data() {
      return {
        wechatId: utils.getCookie('wechat_id'),
        task_id: this.$route.query.task_id,
        form: {
          address_id: undefined,
          remark: undefined
        },
        dataForm: {},
      }
    },
    computed: {},
    methods: {
      onsubmit(type) {
        if (type === 0) {
          return;
        }
        let params = Object.assign(this.form, {
          task_id: this.task_id,
          open_id: utils.getCookie('open_id_' + this.wechatId)
        });
        Dialog.confirm({
          message: '确认兑换吗？',
          confirmButtonText: '兑换',
          confirmButtonColor: '#FDCC4A'
        }).then(() => {
          Indicator.open('加载中...');
          this.$axios.taskExchange(params).then(res => {
            Indicator.close();
            if (res.errcode !== '000') {
              this.$toast(res.errmsg);
              return false;
            }
            this.$toast(res.errmsg);
            setTimeout(() => {
              this.$router.go(-2);
            }, 500)
          })
        })
      },
      loadData() {
        let params = {
          task_id: this.task_id,
          open_id: utils.getCookie('open_id_' + this.wechatId)
        };
        Indicator.open('加载中...');
        this.$axios.selectAddress(params).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return false;
          }
          this.dataForm = res.data;
          this.form.address_id = res.data.address.address_id;
          if (this.$store.state.detailsAddress){
            this.form.address_id = this.$store.state.detailsAddress.address_id;
            this.dataForm.address = this.$store.state.detailsAddress;
          }
        })
      },
      goAddress(){
        this.$router.push({path:'/address',query:{detailsAddress:true}})
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .detailsAddress {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: white;

    .title {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 0.2rem 0;
      padding: 0 0.32rem;
      box-sizing: border-box;

      .tip {
        width: 0.08rem;
        height: 0.33rem;
        margin-right: 0.15rem;
        background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
      }

      span {
        font-size: 0.32rem;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        color: #333333;
        line-height: 0.48rem;
      }
    }

    .img {
      width: 6.8rem;
      height: 4rem;
      margin: 0.15rem 0.37rem 0.3rem 0.33rem;
      box-sizing: border-box;
      background: #F2F1F0;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 4.23rem;
        height: 3.09rem;
      }
    }

    .address {
      margin-top: 0.26rem;
      width: 6.9rem;
      /*height: 1.78rem;*/
      background: #F8F8F8;
      margin-left: 0.27rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: 0.38rem;
      box-sizing: border-box;

      .icAddress {
        width: 0.65rem;
        height: 0.64rem;
        margin-top: 0.57rem;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
      }

      .div1_1 {
        margin-top: 0.38rem;

      }

      .icRight {
        margin-top: 0.8rem;
        margin-right: 0.18rem;
        width: 0.1rem;
        height: 0.2rem;
      }

      .div1 {
        width: 6rem;
        top: 0.38rem;
        display: flex;
        flex-direction: row;

        .top {
          display: inline-flex;
          width: 5rem;

        }

        .userName {
          margin-right: 0.2rem;
          color: #333333;
          font-size: 0.3rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap
        }
        .message{
          margin-top: 0.3rem;
          margin-left: 0.3rem;
          color: #ACACAC;
        }

        .phone {
          color: #ACACAC;
          font-size: 0.26rem;
          line-height: 0.42rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap
        }
      }

      .userAddress {
        width: 4.8rem;
        color: #333333;
        font-size: 0.24rem;
        margin-top: 0.06rem;
        text-overflow: ellipsis;
        overflow: hidden;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
      }
    }

    .note {
      width: 6.9rem;
      margin: 0 auto;
      margin-top: 0.31rem;

      textarea {
        width: 100%;
        height: 1.78rem;
        background: #F8F8F8;
        color: #ACACAC;
        font-size: 0.3rem;
        border: 0;
        line-height: 0.4rem;
        padding: 0.2rem;
        box-sizing: border-box;
        border-radius: 0.15rem;
      }

      textarea::-webkit-input-placeholder {
        color: #ACACAC;
      }

      textarea ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ACACAC;
      }

      textarea :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #ACACAC;
      }

      textarea :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #ACACAC;
      }
    }

    .btn {
      position: fixed;
      width: 100%;
      height: 1rem;
      bottom: 0rem;
      background: white;
      right: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;

      input[type='button'] {
        width: 6.96rem;
        height: .80rem;
        display: block;
        border-radius: .40rem;
        border: 0;
      }

      .active {
        background: rgba(204, 204, 204, 1) !important;
      }

      .inputBg {
        background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
      }
    }
  }
</style>
